<template>
  <section class="xmv-badges xmv-wrap">
    <h4>图片懒加载</h4>
    <div class="demo-markup-source u-letter-box--small c-text">
      <ul class="brand-hot c-list">
        <li class="brand-hot__item c-list__item" v-for="(li,index) in fcBrand" :key="index">
          <a class="brand-hot__link">
            <img class="icon-brand" v-lazy="`${IMGURL}${li.brandPic}`">
            {{li.brandName}}
          </a>
        </li>
      </ul>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
&ltimg class="icon-brand" v-lazy="`${IMGURL}${li.brandPic}`"&gt

import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'http://mycdn.avicare.cn/group1/M00/00/7F/O24cYVjt4GKAJovCAABAeKv7Krs288.jpg',
  // loading: 'http://mycdn.avicare.cn/group1/M00/00/7F/O24cYVjt4MeATtX-AAAvKdc4p9A543.gif',
  loading: 'http://mycdn.avicare.cn/group1/M00/01/19/O24cYVkRFFWAEyinAAARrQpHyUU170.png',
  attempt: 1,
});
        </code>
      </pre>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      IMGURL: 'http://www.epicc.com.cn/wap/export',
      fcBrand: [
        {
          brandId: "402880861203d16701122d764d7a0085",
          brandName: "一汽奥迪",
          brandPic: "/home/ecar/jy/pics/brand/ADA1.jpg"
        },
        {
          brandId: "I0000000000000000200000000000321",
          brandName: "讴歌",
          brandPic: "/home/ecar/jy/pics/brand/AKA0.jpg"
        },
        {
          brandId: "4028808816ec9e150116f5ff053200ac",
          brandName: "奥路卡",
          brandPic: "/home/ecar/jy/pics/brand/ALC0.jpg"
        },
        {
          brandId: "402880ef0cd29b61010cd7e6dade004d",
          brandName: "奥迪",
          brandPic: "/home/ecar/jy/pics/brand/ADA0.jpg"
        },
        {
          brandId: "I0000000000000000200000000000322",
          brandName: "奥克斯",
          brandPic: "/home/ecar/jy/pics/brand/AKD0.jpg"
        },
        {
          brandId: "I0000000000000000200000000000287",
          brandName: "阿斯顿-马丁",
          brandPic: "/home/ecar/jy/pics/brand/ASA0.jpg"
        },
        {
          brandId: "I0000000000000000200000000000320",
          brandName: "阿尔法罗米欧",
          brandPic: "/home/ecar/jy/pics/brand/AEA0.jpg"
        },
        {
          brandId: "402880991134d503011144d12bed0097",
          brandName: "安驰",
          brandPic: "/home/ecar/jy/pics/brand/ACA0.jpg"
        },
        {
          brandId: "4028b2b655edd02e015606ce3dfe2378",
          brandName: "广汽讴歌",
          brandPic: "/home/ecar/jy/pics/brand/AKA1.jpg"
        },
        {
          brandId: "4028b2b65f9f1670015f9f8d73ba02af",
          brandName: "ARCFOX",
          brandPic: "/home/ecar/jy/pics/brand/ARC0.jpg"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.brand-hot {
  overflow: hidden;
  margin: 0 4%;
  background: #fff;
  padding: 0.15rem 0;
}
.brand-hot__item {
  float: left;
  width: 50%;
  font-size: 0.32rem;
  overflow: hidden;
  white-space: nowrap;
}
.brand-hot__link {
  width: 100%;
  font-size: 0.32rem;
  padding: 0.15rem;
  display: inline-block;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.icon-brand {
  display: inline-block;
  width: 0.46rem;
  height: 0.46rem;
  margin: 0 auto 2px;
  vertical-align: middle;
}
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
p {
  text-align: left;
  padding: 0.5em 0;
}
.c-code--multiline {
  display: block;
  padding: 0.5em 1em;
  border-radius: 4px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
.demo-markup-source {
  text-align: left;
}
.c-code {
  font-size: 0.8em;
}
</style>